<!--
 * @Descripttion: 
 * @LastEditors: xzh
 * @LastEditTime: 2024-01-04 11:23:48
-->
<template>
  <div v-loading="statisticDetailsParam.loading" class="details-containter">
    <el-card class="el-card-bottom-top">
      <template #header>
        <span>{{ $t(statisticDetailsParam.label) }}</span>
      </template>
      <div class="details-progress">
        <div
          class="progress-content"
          v-for="dataGroup in statisticDetailsParam.dataGroupArr"
          :key="dataGroup.type"
        >
          <div class="progress-content-title">
            <span>{{ dataGroup.type }}</span>
            <CountTo :endVal="dataGroup.value[0] || 0" />
          </div>
          <el-progress
            :show-text="false"
            :stroke-width="15"
            status="exception"
            :percentage="
              ((dataGroup.value[0] || 0) / (dataGroup.value[1] || 0)) * 100
            "
          />
        </div>
      </div>
      <div class="details-statistic">
        <StatisticStatus
          :dataArr="typeArr"
          :loading="statisticDetailsParam.loading"
        />
      </div>
    </el-card>
    <!-- 分类数据列表 -->
    <div
      :class="[
        'details-list',
        AfterSaleUtils.statisticTableColumnMap[
          statisticDetailsParam.statisticType
        ]?.length > 1
          ? 'list-grid'
          : '',
      ]"
    >
      <div
        class="details-list-groupColumn"
        v-for="(columnGroup, columnGroupIndex) in AfterSaleUtils
          .statisticTableColumnMap[statisticDetailsParam.statisticType]"
        :key="columnGroupIndex"
      >
        <el-card
          class="el-card-bottom-top"
          v-for="(dataGroup, index) in statisticDetailsParam.dataGroupArr"
          :key="dataGroup.type"
          :style="(index + 1) % 2 == 0 ? { 'flex-grow': '1' } : {}"
        >
          <template #header>
            <span>{{
              `${dataGroup.type}${
                !!dataGroup.dataSuffix[columnGroupIndex]
                  ? $t(dataGroup.dataSuffix[columnGroupIndex])
                  : ""
              }`
            }}</span>
          </template>
          <vxe-table
            :data="dataGroup.dataArr[columnGroupIndex]"
            height="auto"
            show-header-overflow
            border
          >
            <vxe-column type="seq" :title="$t('table.seq')" width="50" />
            <vxe-column
              v-for="column in columnGroup"
              :key="column.field"
              :field="column.field"
              :title="$t(column.title)"
              :width="column.width || ''"
              :formatter="column.formatter"
            />
          </vxe-table>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, toRefs, computed } from "vue";
import { object_Inf } from "@/utils/typings/index.type";
import { CountTo } from "vue3-count-to";
import router from "@/router";
import AfterSaleUtils from "../../afterSale-utils";
import StatisticStatus from "@/views/dashboardManage/components/statistic-status/index.vue";
/**
 * @Author: xzh
 * @Descripttion: 统计详情页参数
 * @Param:
 */
let statisticDetailsParam = reactive<object_Inf>({
  loading: false,
  label: "",
  statisticType: "",
  dataGroupArr: [],
});
/**
 * @Author: xzh
 * @Descripttion:保养任务状态
 * @Param:
 * @param {*} computed
 */
let typeArr = computed(() => {
  let { dataGroupArr } = statisticDetailsParam;
  return (dataGroupArr || []).map((data: object_Inf, index: number) => {
    let { type, value } = data;
    //获取任务状态扩展信息
    let statusExtra =
      AfterSaleUtils.upkeepTaskStatusArr[
        index % AfterSaleUtils.upkeepTaskStatusArr.length
      ] || {};
    return {
      label: type,
      value: value.join("/"),
      ...statusExtra,
    };
  });
});
/**
 * @Author: xzh
 * @Descripttion: 初始化
 * @Param:
 */
onMounted(() => {
  //获取路由统计类型
  let { statisticType }: object_Inf = router.currentRoute.value.query;
  //加载统计详情
  initStatisticDetails(statisticType);
});
/**
 * @Author: xzh
 * @Descripttion: 加载统计详情
 * @Param:
 * @param {*} statisticType 统计类型
 */
let initStatisticDetails = async (statisticType: string) => {
  let { loading } = toRefs(statisticDetailsParam),
    { detailsLabel } =
      AfterSaleUtils.statisticMap.find(
        (x: object_Inf) => x.value == statisticType
      ) || {};
  try {
    loading.value = true;
    //获取不同类型对应统计信息
    let { statistic, dataArr, dataSuffix } =
      await AfterSaleUtils.getAfterSaleStatistics(statisticType);
    Object.assign(statisticDetailsParam, {
      //格式化数据-根据type分组
      dataGroupArr: statistic.map(
        ({ type, totalNum, onlineNum }: object_Inf) => ({
          type,
          value: [onlineNum, totalNum],
          dataArr: dataArr.map((data: object_Inf) =>
            data.filter((x: object_Inf) => x.type == type)
          ),
          dataSuffix,
        })
      ),
      label: detailsLabel, //详情标题
      statisticType,
    });
  } finally {
    loading.value = false;
  }
};
</script>
<style lang="scss" scoped>
.details-containter {
  display: flex;
  flex-direction: column;
  gap: var(--details-item-gap);
  > .el-card:first-child {
    :deep(.el-card__body) {
      display: flex;
      gap: 2rem;
      .details-progress {
        flex: 30% 0 0;
        gap: var(--details-item-gap);
        display: flex;
        flex-direction: column;
        .progress-content-title {
          display: flex;
          justify-content: space-between;
          padding: 0.5rem;
          > span {
            &:first-child {
              font-weight: 700;
              font-style: normal;
              color: #7680ba;
            }
            &:last-child {
              font-size: 1rem;
              color: #d9001b;
            }
          }
        }
      }
      .details-statistic {
        flex: 1;
      }
    }
  }

  .details-list {
    &:is(.list-grid) {
      display: grid;
      grid-template-columns: repeat(
        auto-fill,
        calc(50% - (var(--details-item-gap) / 2))
      );
      justify-content: space-between;
      grid-column-gap: var(--details-item-gap);
      .details-list-groupColumn {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--details-item-gap);
        .el-card {
          flex: 100% 0 0;
          width: 0;
        }
      }
    }
    &:not(.list-grid) {
      width: 100%;
      .details-list-groupColumn {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--details-item-gap);
        .el-card {
          flex: calc(50% - var(--details-item-gap)) 0 0;
        }
      }
    }
  }
  --details-item-gap: 0.5rem;
}
</style>
